<style lang="scss">
  @import "../../styles/base";

  .container {
    background-color: #f5f5f5;
    height: 100vh;
    .warnning-water {
      position: absolute;
      left: pxToRem(515);
      top: pxToRem(280);
      width: pxToRem(100);
      height: pxToRem(111);
    }
    .product-img {
      display: block;
      width: pxToRem(1125);
      height: pxToRem(1246);
    }
    .switch-main {
      @include middle-center-x();
      top: pxToRem(1250);
      .img {
        width: pxToRem(153);
        height: pxToRem(153);
      }
    }
    .current-hum-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: pxToRem(60);
      min-height: 123rpx;
      box-sizing: border-box;
      .time {
        margin-right: pxToRem(100);
        font-size: pxToRem(90);
        color: #aaaaaa;
        text-align: center;
      }
      .current-hum {
        font-size: pxToRem(90);
        color: #aaaaaa;
        text-align: center;
      }
    }
    .fog-wrap {
      display: flex;
      align-items: center;
      margin-top: pxToRem(50);
      margin-left: auto;
      margin-right: auto;
      width: pxToRem(1125-210);
      border-radius: pxToRem(18);
      &.fog-wrap-1 {
        .fog {
          &:first-child {
            .inner {
              border-radius: pxToRem(18);
            }
          }
        }
      }
      &.fog-wrap-2 {
        .fog {
          &:first-child {
            .inner {
              border-top-left-radius: pxToRem(18);
              border-bottom-left-radius: pxToRem(18);
            }
          }
          &:nth-child(2) {
            .inner {
              border-top-right-radius: pxToRem(18);
              border-bottom-right-radius: pxToRem(18);
            }
          }
        }
      }
      &.fog-wrap-3 {
        .fog {
          &:first-child {
            .inner {
              border-top-left-radius: pxToRem(18);
              border-bottom-left-radius: pxToRem(18);
            }
          }
          &:last-child {
            .inner {
              border-top-right-radius: pxToRem(18);
              border-bottom-right-radius: pxToRem(18);
            }
          }
        }
      }
      .fog {
        position: relative;
        flex: 1;
        height: pxToRem(72);
        padding-top: pxToRem(18);
        &.disabled {
          opacity: .5;
        }
        &:first-child {
          .inner {
            border-top-left-radius: pxToRem(18);
            border-bottom-left-radius: pxToRem(18);
          }
        }
        &:last-child {
          .inner {
            border-top-right-radius: pxToRem(18);
            border-bottom-right-radius: pxToRem(18);
          }
        }
        .inner {
          position: relative;
          height: pxToRem(43);
          background-color: #e7e7e7;
          &.active {
            background-color: #fece00;
          }
        }
        .point {
          position: absolute;
          right: 0;
          top: 0;
          width: pxToRem(43);
          height: pxToRem(43);
          border-radius: 50%;
          background-color: #fff;
        }
      }
    }
    .menu-list {
      display: flex;
      align-items: center;
      margin-top: pxToRem(50);
      padding-left: pxToRem(105);
      padding-right: pxToRem(105);
      .menu {
        flex: 1;
        margin-right: pxToRem(30);
        &:last-child {
          margin-right: 0;
        }
        .img {
          width: pxToRem(125);
          height: pxToRem(125);
          &.disabled {
            opacity: .5;
          }
        }
      }
    }
  }

  .iphoneX {
    .progress-bar {
      margin-top: pxToRem(120);
    }
    .menu-list {
      margin-top: pxToRem(120);
    }
  }
</style>
<template>
  <div class="container" :class="isIphoneX ? 'iphoneX':''">
    <img class="product-img" src="https://image.watsons.com.cn//upload/a6a1d015.jpg">
    <img class="warnning-water" v-if="configData.warnning_water" :animation="animationData"
         src="/static/img/config/warnning_water.png">
    <div class="current-hum-wrap">
      <div class="time" v-if="configData.timer > 0 || configData.timer_min > 0">
        <span v-if="configData.timer < 10">0</span>{{configData.timer}}:<span v-if="configData.timer_min < 10">0</span>{{configData.timer_min}}
      </div>
      <!--<div class="time" v-else></div>-->
      <div class="current-hum" v-if="showModel1">{{configData.hum}}%</div>
    </div>
    <!--<div class="switch-main">-->
    <!--<img class="img" v-if="configData.switch_main" @click="setConfig('switch_main', false)"-->
    <!--src="/static/img/config/switch-main-active.png">-->
    <!--<img class="img" v-else @click="setConfig('switch_main', true)" src="/static/img/config/switch_main.png">-->
    <!--</div>-->
    <ul class="fog-wrap" :class="'fog-wrap-'+configData.fog">
      <li class="fog" :class="configData.switch_main ? '':'disabled'" @click="setConfig('fog', 1)">
        <div class="inner" :class="{active: configData.fog >= 1}">
          <div class="point"></div>
        </div>
      </li>
      <li class="fog" :class="configData.switch_main ? '':'disabled'" @click="setConfig('fog', 2)">
        <div class="inner" :class="{active: configData.fog >= 2}">
          <div class="point"></div>
        </div>
      </li>
      <li class="fog" :class="configData.switch_main ? '':'disabled'" @click="setConfig('fog', 3)">
        <div class="inner" :class="{active: configData.fog >= 3}"></div>
      </li>
    </ul>
    <!--<slider :value="configData.fog" @change="changeFog" :min="1" :max="3" block-size="12" class="progress-bar"-->
    <!--active="true" backgroundColor="#e7e7e7" activeColor="#fece00"></slider>-->
    <ul class="menu-list">
      <li class="menu" @click="config">
        <img v-if="configData.switch_main" @click="setConfig('switch_main', false)" class="img"
             src="/static/img/config/switch-main-active.png">
        <img v-else class="img" @click="setConfig('switch_main', true)" src="/static/img/config/switch_main.png">
      </li>
      <li class="menu">
        <template v-if="configData.switch_main">
          <picker v-if="!configData.warnning_water" mode="multiSelector" @change="changeTime"
                  @columnchange="columnchange" :value="timeList"
                  :range="timeRange">
            <img v-if="(configData.timer > 0 || configData.timer_min > 0)" class="img"
                 src="/static/img/config/021@2x.png">
            <img v-else class="img" src="/static/img/config/02@2x.png">
          </picker>
          <img v-else class="img" src="/static/img/config/02@2x.png">
        </template>
        <img v-else class="img disabled" src="/static/img/config/022.png">
      </li>
      <li class="menu">
        <template v-if="configData.switch_main">
          <img class="img" @click="setConfig('switch_uv', false)"
               v-if="configData.switch_uv && !configData.warnning_water"
               src="/static/img/config/031@2x.png">
          <img class="img" @click="setConfig('switch_uv', true)" v-else src="/static/img/config/03@2x.png">
        </template>
        <img v-else class="img disabled" src="/static/img/config/032.png">
      </li>
      <li class="menu">
        <template v-if="configData.switch_main">
          <picker v-if="!configData.warnning_water" mode="selector" @change="changeHum" :value="hum" :range="humList">
            <img class="img" v-if="showModel1" src="/static/img/config/041@2x.png">
            <img class="img" v-else src="/static/img/config/04@2x.png">
          </picker>
          <img v-else class="img disabled" src="/static/img/config/042.png">
        </template>
        <img v-else class="img disabled" src="/static/img/config/042.png">
      </li>
      <li class="menu">
        <template v-if="configData.switch_main">
          <img class="img" @click="setConfig('model', 2)" v-if="showModel3 && !configData.warnning_water"
               src="/static/img/config/051@2x.png">
          <img class="img" @click="setConfig('model', 3)" v-else src="/static/img/config/05@2x.png">
        </template>
        <img v-else class="img disabled" src="/static/img/config/052.png">
      </li>
      <li class="menu">
        <template v-if="configData.switch_main">
          <img class="img" @click="setConfig('switch_atm', false)"
               v-if="configData.switch_atm && !configData.warnning_water"
               src="/static/img/config/061@2x.png">
          <img class="img" @click="setConfig('switch_atm', true)" v-else src="/static/img/config/06@2x.png">
        </template>
        <img v-else class="img disabled" src="/static/img/config/062.png">
      </li>
    </ul>
  </div>
</template>

<script>
  import { APP_ID } from '../../config'

  export default {
    data() {
      return {
        isIphoneX: /iPhone X/.test(App.systemInfo.model),
        configData: {
          switch_uv: false,
          model: 2,
          timer: 0,
          timer_min: 0,
          warnning_water: false,
          fog: 0,
        },
        showModel1: false,
        showModel3: false,
        isFlog: true,
        timeObj: {
          hour: '00',
          minute: '00',
        },
        timeRange: [
          [], []
        ],
        timeList: [ 0, 0 ],
        totalTime: 0,
        totalTimeObj: {},
        humList: [ '关闭', 45, 50, 55, 60, 65, 70, 75, 80, 85, 90 ],
        hum: 0,
        animationData: {},
      }
    },
    components: {},
    methods: {
      changeTime(e) {
        console.info(e)
        const timeList = e.mp.detail.value;
        this.timeList = timeList;
        console.info(this.timeList)
        this.setConfig('timer', timeList[ 0 ] % 12);
        this.setConfig('timer_min', timeList[ 1 ] % 60);
      },
      columnchange(e) {
        const { column, value } = e.mp.detail;
        this.timeList[ column ] = value;
      },
      changeFog(e) {
        if (e.mp.detail.value === 0) {
          e.mp.detail.value = 1;
        }
        this.setConfig('fog', e.mp.detail.value);
      },
      changeHum(e) {
        this.hum = parseInt(e.mp.detail.value);
        const value = this.humList[ parseInt(e.mp.detail.value) ];
        if (value === '关闭') {
          this.setConfig('hum', 45);
          this.setConfig('model', 2);
          return false;
        }
        this.setConfig('model', 1);
        this.setConfig('hum', this.humList[ parseInt(e.mp.detail.value) ]);
      },
      setConfig(name, value) {
        if (this.configData.warnning_water && name !== 'switch_main' && name !== 'fog') {
          return false;
        }
        if (!this.configData.switch_main && name !== 'switch_main') {
          return false;
        }
        this.configData[ name ] = value;
        if (this.configData.model == 1) {
          this.showModel1 = true;
          this.showModel3 = false;
        } else if (this.configData.model == 3) {
          this.showModel1 = false;
          this.showModel3 = true;
        } else {
          this.showModel1 = false;
          this.showModel3 = false;
        }
        const attrs = {};
        attrs[ name ] = value;
        console.info(attrs)
        setTimeout(async () => {
          const result = await wx.sendSocketMessage({
            data: JSON.stringify({
              cmd: 'c2s_write',
              data: {
                did: App.currentDevice.did,
                attrs: attrs,
              }
            })
          })
          console.info(result)
        }, 200)
      },
      startPing() {
        this.heartbeatTimerId = setInterval(async function () {
          wx.sendSocketMessage({
            data: JSON.stringify({ cmd: 'ping' })
          })
        }.bind(this), 30000)
      },
      async wsLogin() {
        wx.sendSocketMessage({
          data: JSON.stringify({
            cmd: 'login_req',
            data: {
              appid: APP_ID,
              uid: App.userInfo.uid,
              token: App.userInfo.token,
              p0_type: 'attrs_v4',
              heartbeat_interval: 180,
              auto_subscribe: false
            }
          })
        })
        wx.sendSocketMessage({
          data: JSON.stringify({
            cmd: 'subscribe_req',
            data: [
              { did: App.currentDevice.did }
            ]
          })
        })
        wx.sendSocketMessage({
          data: JSON.stringify({
            cmd: 'c2s_read',
            data: {
              did: App.currentDevice.did
            }
          })
        })
      },
    },
    onHide() {
      console.info(1111)
      wx.closeSocket();
    },
    async onShow() {
      console.info(222)
      if (!App.userInfo) {
        await App.fetchLogin();
      }
      wx.closeSocket();
      this.configData = {
        switch_uv: false,
        model: 2,
        timer: 0,
        timer_min: 0,
        hum: 45,
        warnning_water: false,
        fog: 0,
      }
      const animation = wx.createAnimation({
        duration: 2000,
        timingFunction: 'ease',
      })
      animation.scale(this.scale).step()
      this.scale = this.scale === 2 ? 1 : 2;
      this.animationData = animation.export()
      setInterval(function () {
        animation.scale(this.scale).step()
        this.scale = this.scale === 2 ? 1 : 2;
        this.animationData = animation.export()
      }.bind(this), 2000)
      for (let i = 0; i < 12; i++) {
        this.timeRange[ 0 ].push(i < 10 ? '0' + i : i);
      }
      for (let i = 0; i < 60; i++) {
        this.timeRange[ 1 ].push(i < 10 ? '0' + i : i);
      }
      console.info(`wss://wx${App.currentDevice.host}/ws/app/v1`)
      wx.connectSocket({
        url: `wss://wx${App.currentDevice.host}/ws/app/v1`
      })
      wx.onSocketOpen(async result => {
        console.log('WebSocket连接已打开！', result)
        await this.wsLogin();
      })
      wx.onSocketError(function (result) {
        console.log('WebSocket连接打开失败，请检查！', result)
      })
      wx.onSocketClose(function (result) {
        console.log('WebSocket 已关闭！', result)
        clearInterval(this.heartbeatTimerId);
      }.bind(this))
      wx.onSocketMessage(function (message) {
        const result = JSON.parse(message.data)
        console.info(result)
        switch (result.cmd) {
        case 'pong':
          break;
        case 'login_res':
          if (result.data.success) {
            this.startPing();
          } else {
            console.log('Login failed, will try again, please wait...');
            this.wsLogin();
          }
          break;
        case 'subscribe_res':
          break;
        case "s2c_online_status":
          break;
        case "s2c_raw":
          break;
        case "s2c_noti":
          result.data.attrs.fog = result.data.attrs.fog > 10 ? 0 : result.data.attrs.fog;
          this.configData = result.data.attrs;
          console.info(this.configData)
          this.timeList = [ this.configData.timer, this.configData.timer_min ];
          console.info(this.timeList)
          if (this.configData.model == 1) {
            this.showModel1 = true;
            this.showModel3 = false;
          } else if (this.configData.model == 3) {
            this.showModel1 = false;
            this.showModel3 = true;
          } else {
            this.showModel1 = false;
            this.showModel3 = false;
          }
          this.hum = this.humList.indexOf(this.configData.hum);
          break;
        case "s2c_invalid_msg":
          break;
        }
      }.bind(this))
    },
  }
</script>
